//柱状图组件
import * as echarts from "echarts";
import { useEffect } from "react";
import { useRef } from "react";

//1.把功能代码都放在这个组件
const BarChar = ({title}) => {
	const chartRef = useRef(null)
  useEffect(() => {
	
    //保证dom可用 进行页面的渲染
    // 1. 生成实例
    const myChart = echarts.init(chartRef.current);
    // 2. 准备图表参数
    const option = {
			title:{
				text:title

			},
      xAxis: {
        type: "category",
        data: ["Vue", "React", "Angular"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [200, 500, 100],
          type: "bar",
        },
      ],
    };
    // 3. 渲染参数
    myChart.setOption(option);
  }, []);
  return (
    <div>
      <div ref={chartRef} style={{ with: "100px", height: "200px" }}></div>
    </div>
  );
};

export default BarChar;
